We Are JavaScripters! @33rd
https://gyazo.com/a71aec867284b81a36095c61bca2bdce
公式プラグインでほとんどの機能を実装できる
ごく基本的知識だけで実装できる
仕組み
Data Sources
ページ生成用のコンポーネントのみ
分断されたコンポーネントに渡す時、冗長なコードになりうる
StaticQueryの宣言
変数クエリが使えない
複雑な操作をする時は全数取得後にjsでデータを操作する
フロントエンドエンジニア
こんなことありませんか？
他の端末では動いたがローカルで動かない
サーバーの環境をつくるのが大変
やること
コンテナを立ててアプリをつくる
メリット
環境構築が楽
ソースコードと環境変数をまるごと管理
サーバーサイドの人とも簡単に環境を共有
デプロイ
一発でAPIサーバーと同時に建てられる
デメリット
仮想環境なのでホットリロードが遅い
CPU依存なので環境によっては動かない
環境
そもそも関数とは？
サブルーチンの一種
code:js
function suqure(number){
return number * number;
}
メソッドは？
とあるobjectに紐付けられた関数
とりあえずオブジェクトをつくる
クラスからオブジェクトをつくる
メソッドはそのクラス内で設定できる
functionは書けるか？
書けない
すべてがメソッドになるため
関数が存在しない
変数を代入
メソッドの呼び出しでカッコを省略できる
変数にメソッドを代入できないこともない
手触りの違い
クラスが分かれば理解は進む
つくったもの
要件
お問い合わせフォームを使いたい
構成
Netlify Function
Netlify Form
LINEに通知
プルリクをつくるとプレビューURLを見れる
つまづきポイント
Netlify Form
data-netlify="true" を書く
DOMに差分があると紐付けが見つけられずエラーになる
解消方法
いったんキャッシュを消す
公式にも追記されてる
SPAでも使えそう？
Netlify Function
サーバーサイドプログラムをJSかGo langで書ける
yamanoku.icon 発表
コードフォーマッター
第一引数に内容
第二引数にオプション
簡単な仕組み
パース
parserというオプション
@babel/parser
@typescript-eslint/estree
remarkベースのパーサー
Docに変換
中間形式
テキストに近い方をしている
言語に関係ないアルゴリズムでテキストに変換
文字列に変換
Prettierについて知りたい
prettierのソースを読む
commands.mdを読む
サイボウズ株式会社
フロントエンド
Intro
とあるプロジェクトでJS => TypeScript移行がメイン
DOMの比較しかできない…
ビジュアルテストしてくれる
OSSなら無料
使い方
アカウント登録
Storybook使用のリポジトリを用意
importで呼び出し
tokenを取得してビルドする
ライブラリ
ブランチを切り替え
ビューポート
Tips
--exit-zero-on-changesをつける
差分が合ってもビルド自体はパスする
Open Source Planは審査が必要
スタータープラン扱い？
日本語フォントが対応まだ
7月からrepro
ポートフォリオサイトをつくる
スプレッドシートで作ってみたやつ
コンテンツがない
CMSを探求してみる
Repro Web
サインイン
設定 => アプリ設定 => SDKトークンを控える
index.htmlに設置
コンテンツを書くとサイトができる
記事投稿
見出し、本文、ボタンが作れる
ダイアログボックスっぽくなる
複数の画面を創る
ホーム画面、プロフィール画面
画面遷移イベント定義
イベントをトリガーに表示
URL別に異なるものができる
ページを作る時のメッセージ以外の肝
配信期間
長くする
表示回数
無制限
イベントトリガー
配信対象設定
配信対象設定でハマる
全ユーザーへの選択肢がない
デザイン
カスタム設定で組める
Peep
検索において最適化をしたい
最新のJSに対応してくれた
SEOでやること
サイトのポテンシャルを上げる
検索エンジンに伝える
重要キーワード
SSR
CSR
SSR + SPA
SSR or SPA
正しくインデックスさせるためにはどうすればいいか？
SSRとDynamic Renderingが良さそう？
最新だとDRをしなくなってよかった
懸念点
WRS更新が少し送れる
2-3週間遅れて更新
生成されたコンテンツはインデックスが遅い
余談
インデックスでのセキュリティが悪い
<?=$_GET['page']>みたいに
Googleのバグだけど変えられなかった
これが原因で変えられた？
WorkerDOM
<script>の属性について
defer
async
type="module"
async
レンダリングが短ければ短いほどよいサイト
いちいち手書きするのはダルい
自動的にHTMLを書いたらAMPに変換
worker-dom
code:html
<script type="module">
import {upgradeElement} from '/dist/main.mjs';
uogradeElement(document.getElementById('xxxxx'), '/dist/worker/main.mjs');
</script>
独立したDOMのように振る舞える